<template>
	<view style="background-color: #000000;height: 200px;position: relative;">
		<view class="uni-padding-wrap uni-common-mt" style="top: 50%;left: 0;height: 100%;">
			<view class="player" style="height: 100%;">
				<video id="myVideo"
					v-if="showVideo"
					:src="logtime.path"
					controlslist="nodownload"
					controls
					object-fit="contain"
					:enable-progress-gesture="closeProgress"
					:initial-time="initialTime"
					:autoplay="autoPlay"
					@play="play"
					@ended="endPlay"
					@timeupdate="myseeked"></video>
			</view>
		</view>
	</view>
</template>
<script>
	import {
	    KmsScourseStudying,
		KmsLastStudied
	} from '@/api/kms/course.js';
	export default {
		data() {
			return {
				title: 'video',
				src: '',
				danmuValue: '',
				showVideo: false,
				closeProgress: true,
				// 现在的时间
				lastTime: 0,
				currentTime: this.initialTime,
				// 计时器
				timer: '',
				fileId:'',
				studiedSeconds: 0,
				//更新播放的进度
				nowTime: '',
				// 固定的进度,不会因为回退而改变
				dingTime: 0,
				autoPlay: true
			}
		},
		props: {
			courseId: Number,
			
			logtime: Object,
			initialTime: Number,
			magPage: Boolean
		},
		watch:{
			 logtime: {
			      handler(val) {
			        var endTime = new Date().getTime()/1000
			        var secondTime = endTime-this.nowTime
					if(this.fileId != ''){
						if(this.nowTime != ''){
							this.getScourseStudying(secondTime)
						}
					}
			        this.fileId = this.logtime.fileId
			      },
			      deep: true,
			      immediate: true
			    },
			initialTime:{
				handler(val) {
				  this.dingTime = val
				},
				deep: true,
				immediate: true
			},
			magPage:{
				handler(val) {
					if(val){
						this.autoPlay = false
					}
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {
			// #ifndef MP-ALIPAY || MP-TOUTIAO
			this.videoContext = uni.createVideoContext('myVideo', this)
			// #endif
			// #ifdef APP-PLUS || MP-BAIDU
			setTimeout(()=>{
				this.showVideo = true
			},350)
			// #endif
			// #ifndef APP-PLUS || MP-BAIDU
				this.showVideo = true
			// #endif
		},
		onLoad(option) {
			// this.courseId = option.courseId
			// this.fileId = option.fileId
			// this.src = option.path
			// this.logtime = JSON.parse(decodeURIComponent(option.logtime))
			// this.getLastTime()
		},
		methods: {
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			//用户bai已经拖动进度条
			myseeked(event) {
				if(this.logtime.studyStatus === 2){
					this.currentTime = event.detail.currentTime
				}else{
					if((event.detail.currentTime-this.dingTime).toFixed(3)<2 && (event.detail.currentTime-this.dingTime).toFixed(3) > 0){
						this.dingTime = this.currentTime
					}
					this.lastTime = this.currentTime
					this.currentTime = event.detail.currentTime
					if(Number((this.currentTime-this.lastTime)).toFixed(3)>2){
						if(this.currentTime > this.dingTime){
							let nowtime=this.dingTime.toFixed(0);
							this.videoContext.seek(nowtime);   
						} 
					}else{
						this.lastTime=this.currentTime;
					}
				}
			},
			//用户正在拖动进度条
			// this.videoContext.onseeking=function(){
			// return false;
			// }
			play(){
				this.nowTime = new Date().getTime()/1000
				// this.timer = setInterval(this.getScourseStudying, 3000);
			},
			endPlay(){
				var endTime = new Date().getTime()/1000
				var secondTime = endTime-this.nowTime
				this.getScourseStudying(secondTime)
				// clearInterval(this.timer);
			},
			// getLastTime(){
			// 	let self = this;
			// 	let params = {
			// 	    courseId: this.courseId,
			// 		fileId: this.logtime.fileId
			// 	}
			// 	KmsLastStudied(params).then(res => {
			// 		self.initialTime = res.data.studiedToSeconds
			// 		self.videoContext.seek(res.data.studiedToSeconds)
			// 	})
			// },
			getScourseStudying(endtime) {
			    let self = this;
			    let params = {
			        courseId: this.courseId,
					fileId: this.fileId,
					studiedSeconds:parseInt(Math.round(endtime)),
					studiedToSeconds:  parseInt(Math.round(this.currentTime))
			    }
			    KmsScourseStudying(params).then(res => {
					self.nowTime = ''
			        // self.listData = res.data;
			        // self.showListData = res.data;
			    })
			}
		},
		destroyed() {
			var endTime = new Date().getTime()/1000
			var secondTime = endTime-this.nowTime
			if(this.nowTime != ''){
				this.getScourseStudying(secondTime)
			}
		  // clearInterval(this.timer);
		}
	}
</script>

<style>
	video {
		width: 100%;
	}
	.player{
	    width: 100%;
	    height: 300px;
	    margin: 0 auto;
	    position: relative;
	}
	.player video{
	    position: absolute;
	    left: 50%;
	    transform: translateX(-50%);
	    height: 100%;
	}
	.player .control{
	    position: absolute;
	    background: rgba(255,255,0,0.3);
	    width: 680px;
	    height: 40px;
	    border-radius: 5px;
	    left: 50%;
	    bottom: 10px;
	    transform: translateX(-50%);
	}
	.player .control view{
	    display: inline-block;
	    line-height: 40px;
	    margin-left: 10px;
	    font-size: 18px;
	    color: #fff;
	}
	.player .control .play_pause,.player .control .expand{
	    color: rgb(255,255,0);
	}
	.player .control view:nth-child(2){
	    width: 460px;
	    height: 10px;
	    background-color: rgba(255,255,255,0.3);
	    border-radius: 5px;
	    overflow: hidden;
	}
	.player .control .progress{
	    display: block;
	    width: 10%;
	    height: 10px;
	    background: #fff;
	}
	.player .control .timer{
	    font-size: 12px;
	}
</style>
